<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>daniella后端列表</title>
    <script src="/public/api.js"></script>
</head>
<body>

    <style>
        body,html{
            width: 100vw;
            height: 100vh;
        }
        *{  
    
            margin: 0;
            color:skyblue;
            font-size: 35px;
            text-decoration: none;
        }
        .link{
            
            width: 100%;
            /* height: 350px; */
            flex-direction: column;
            display: flex;
            justify-content: center;
            text-align: center;
        }
        a:visited{
            color:skyblue;
        }
        .render{
            float: right;
            margin-right: 10%;
            
        }
        .render button {
            border: 0;
        }
    </style>
    <div class="link">
        <a href="/api/api/list/" target="_blank">不需要token</a>
        <a href="/api/api/goods/" target="_blank">需要token商品列表</a>
        <a href="/api/api/login/" target="_blank">不需要token login</a>
        
    </div>
    <div class="render">
        <button>添加</button>
        
    </div>
    <script>
        /* url */
        const inp = document.querySelector('.link')
        
        const url = 'http://192.168.1.11:3000',
             getLink = '/api/link',
              editLink = '/api/editlink',
              setLink = '/api/addlink'
      

        const btn = document.querySelector('button')
       
        
      /* 读取链接 */
        function callback(data){
            
            data = JSON.parse(data)
          
            for(item in data){
                const attribu = `<a href=${data[item].addr} target="_blank">${data[item].link}</a>`
                inp.innerHTML += attribu
            }
            
        }

        api('get',url+getLink,'null',callback)

        /* 添加链接 */
        btn.onclick = ()=>{
            
            /* 判断TOKEN是否存在 */
            var token = localStorage.getItem('user')
            
            if(!token){
                if(confirm('是否需要登录')){
                    window.open('/pubilc/login.html','width=400,height=400')
                }else{
                    console.log('取消登录');
                }

            }else{
                try{
                    token = JSON.parse(token)
                }catch{
                   
                }
                /* 提交TOKEN */
                api('get',`${url+editLink}?user=${token.token}`,'null',addlink)

            }
        }
        
        /* 处理输入框 */
        function addlink(data){
            
            data = JSON.parse(data)
            if(data.status ==200){
                
                // const setinp = document.createElement('input')
                // setinp.innerHTML = `<placeholder = '输入链接名` 

                const inp2 = `<input type="input" placeholder = '输入链接名' class="Linkname" style="width:300px;margin:0 40%"></input>`
                const inp3 = `<input type="input" placeholder = '链接' class="Linkpwd" style="width:300px;margin:0 40%"></input>`
                const sendbtn =`<button type="button" class="sendbtn" style="width:300px;margin:0 40%">确认添加</button>`
                
                // .setAttribute('placeholder','输入链接名')
                // inp.append(inp2)
                
                inp.innerHTML += inp2 +inp3 + sendbtn
                
                var send = document.querySelector('.sendbtn')
                
              
                send.addEventListener('click',()=>{
                    event.stopPropagation()
                    var token = localStorage.getItem('user')
                    if(!token){
                        alert('你是非法用户')
                    }else{
                        try{
                            token = JSON.parse(token)

                        }catch{

                        }
                        const link = document.querySelector('.Linkname')
                        const addr = document.querySelector('.Linkpwd')
                        // const params = {
                        //     token : token.token,
                        //     addr:addr.value,
                        //     link:link.value

                        // }
                        // const params =`token=${token.token}&addr=${addr}&link=${link}`
                        const params ='token='+token.token+'&addr='+addr.value+'&link='+link.value
                       
                        api('post',url+setLink,params,addsuccess)
                    }
                })
                   
               
            }
        }

        /* 添加成功的回调 */

        function addsuccess(data){
            const status = JSON.parse(data)
    
          
            if(status.status == 200){
                alert('添加成功')
                setTimeout(()=>{
                    location.reload()
                },1500)
            }else{
                alert('添加失败')
                setTimeout(()=>{
                    location.reload()
                },1500)

            }

        }
    </script>
</html>